<template>
  <div>
    <!-- 添加或修改岗位对话框 -->
    <el-dialog :title="title" :visible.sync="dialogvisible" width="500px" append-to-body class="my-dialog" @close="cancel">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="所属项目" prop="postName">
          <el-select
            :style="{width: '100%'}"
            v-model="form.projectId"
            filterable
            remote
            reserve-keyword
            placeholder="请输入所属项目关键词"
            :remote-method="remoteMethod"
            :loading="loading_project">
            <el-option
              v-for="item in project_list"
              :key="item.id"
              :label="item.name || '未知'"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="岗位名称" prop="postCode">
          <el-input v-model="form.name" placeholder="请输入岗位名称"/>
        </el-form-item>
<!--        <el-form-item label="岗位状态" prop="status">-->
<!--          <el-radio-group v-model="form.status">-->
<!--            <el-radio-->
<!--              v-for="dict in dict.type.sys_normal_disable"-->
<!--              :key="dict.value"-->
<!--              :label="dict.value"-->
<!--            >{{ dict.label }}-->
<!--            </el-radio-->
<!--            >-->
<!--          </el-radio-group>-->
<!--        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" size="small" plain>确 定</el-button>
        <el-button @click="cancel" size="small">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {listProject, getProject, getProjectPost, addProjectPost, updateProjectPost} from "@/api/system/project";

export default {
  props: ['visible', 'paramId'], // param 执勤点信息
  name: "add",
  dicts: ['sys_normal_disable'],
  data() {
    return {
      dialogvisible: false,
      form: {},
      project_list: [],
      loading_project: false,
      title: '新增岗位',
      rules: {
        name: [
          {required: true, message: "岗位名称不能为空", trigger: "blur"}
        ]
      },
    }
  },
  watch: {
    visible() {
      this.dialogvisible = this.visible
      this.reset()
      if (this.visible) {
        if (this.paramId) {
          this.getDetail()
        }
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != undefined) {
            updateProjectPost(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.$emit('getList')
              this.cancel();
            });
          } else {
            addProjectPost(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.$emit('getList')
              this.cancel()
            });
          }
        }
      });
    },
    // 表单重置
    reset() {
      this.form = {
        name: '', // 项目id
        projectId: '', // 项目id
        status: '0', // 状态
      };
      this.resetForm("form");
    },
    // 执勤点搜素
    remoteMethod(query) {
      this.loading_project = true
      listProject({
        pageNum: 1,
        pageSize: 10,
        name: query
      }).then(response => {
        this.project_list = response.rows;
        this.loading_project = false
      });
    },
    getDetail() {
      getProjectPost(this.paramId).then(response => {
        this.getProject(response.data.projectId)
        this.form = response.data;
        this.title = "修改岗位";
      });
    },
    getProject(id) {
      getProject(id).then(response => {
        this.project_list = [{
          name: response.data.name,
          id: id
        }]
      });
    },
    cancel() {
      this.$emit('update:visible', false)
    },
  }
}
</script>

<style scoped>

</style>
